<template>
  <div class="menu">
    <el-menu class="el-menu-vertical" default-active="0-0">
      <template v-for="(subMenu, subIndex) in menuData" :key="subIndex">
        <MenuItem :subIndex="subIndex" :subMenu="subMenu" />
      </template>
    </el-menu>
  </div>
</template>
<script setup lang="ts">
import MenuItem from './MenuItem.vue';
import { useRouter } from 'vue-router';
import type { menuItem } from './types/index';

const router = useRouter();

// 递归过滤菜单
const filterMenu = (data: menuItem[]) => {
  return data.filter((item) => {
    if (item.children?.length) {
      item.children = filterMenu(item.children);
    }
    return item.meta?.isShow ?? true;
  });
};

const menuData = filterMenu(router.options.routes as any);
</script>
<style lang="scss" scoped>
.menu {
  :deep(.el-sub-menu) {
    width: 200px;
  }
}
</style>
